<template>
    <div class="container buryingConfig" style="width:99%;margin-top:-25px;">
        <div class="query-box query-boxstudent">
            <el-form :model="queryBox" status-icon ref="queryBox">
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">客户类型</div>
                            <el-select filterable clearable v-model="queryBox.type">
                                <el-option
                                    v-for="item in student_type_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">客户来源</div>
                            <el-select
                                filterable
                                clearable
                                v-model="queryBox.dataFrom"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in student_data_from_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                >{{ item.value }}</el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">获取方式</div>
                            <el-select clearable v-model="queryBox.dataFromType" filterable>
                                <el-option
                                    v-for="item in student_data_from_type_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">客户进展</div>
                            <el-form-item>
                                <el-select
                                    clearable
                                    filterable
                                    v-model="queryBox.progress"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in student_progress_options"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    >{{ item.value }}</el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="code">
                            <el-input v-model="queryBox.code" placeholder="客户编号">
                                <template slot="prepend">客户编号</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item label prop="name">
                            <el-input v-model="queryBox.name" placeholder="学生名称">
                                <template slot="prepend">学生名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">导入部门</div>
                            <el-form-item>
                                <el-select
                                    clearable
                                    v-model="queryBox.importDepartment"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in student_import_department"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="school">
                            <el-input v-model="queryBox.school" placeholder="学校名称">
                                <template slot="prepend">学校名称</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="providerTeacher">
                            <el-input v-model="queryBox.providerTeacher" placeholder="所属教师">
                                <template slot="prepend">所属教师</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">状态</div>
                            <el-select clearable v-model="queryBox.isLock" filterable>
                                <el-option
                                    v-for="item in isopen"
                                    :key="item.lable"
                                    :label="item.value"
                                    :value="item.label"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">所属销售</div>
                            <el-select clearable v-model="queryBox.belongTo" filterable>
                                <el-option
                                    v-for="item in belongToNames"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">所属部门</div>
                            <el-select clearable v-model="queryBox.departmentId" filterable>
                                <el-option
                                    v-for="item in departmentInfoList"
                                    :key="item.id"
                                    :label="item.deptName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="depart-box">
                            <div class="slect-title">创建时间</div>
                            <el-date-picker
                                v-model="createDate"
                                type="daterange"
                                :start-placeholder="'开始时间'"
                                :end-placeholder="'结束时间'"
                                range-separator="至"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="7" style="margin-left:3%">
                        <div class="depart-box" style="margin-bottom:20px;">
                            <div class="slect-title" style="width:150px;">最新跟进时间</div>
                            <el-date-picker
                                v-model="trackingDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item label prop="phone">
                            <el-input v-model="queryBox.phone" placeholder="手机号码">
                                <template slot="prepend">手机号码</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">就读年级</div>
                            <el-select v-model="queryBox.grade" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in grade_cache_gradeOptions"
                                    :key="item.value"
                                    :label="item.fGradeName"
                                    :value="item.fId"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">设备</div>
                            <el-select
                                v-model="queryBox.equipment"
                                placeholder="请选择"
                                :change="studentEquipmentChange"
                                clearable
                            >
                                <el-option
                                    v-for="item in student_equipmentgrade_options"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">推广来源</div>
                            <el-select v-model="queryBox.source" placeholder="请选择" clearable>
                                <el-option
                                    v-for="item in student_TGsource_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="pageAddress">
                            <el-input v-model="queryBox.pageAddress" placeholder="页面地址">
                                <template slot="prepend">页面地址</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <el-form-item label prop="keyWords">
                            <el-input v-model="queryBox.keyWords" placeholder="分主题">
                                <template slot="prepend">分主题</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label prop="code">
                            <el-input
                                type="number"
                                v-model="queryBox.trackingNum"
                                placeholder="跟进次数"
                            >
                                <template slot="prepend">跟进次数</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label prop="providerAgent">
                            <div class="depart-box">
                                <div class="slect-title">所属分中心</div>
                                <el-select
                                    v-model="queryBox.providerAgent"
                                    placeholder="请选择"
                                    clearable
                                >
                                    <el-option
                                        v-for="item in branchCenterInfoList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-row class="area">
                            <el-col :span="4">
                                <span class="city-title">所在地区：</span>
                            </el-col>
                            <el-col :span="19" style="margin-left:-1px">
                                <el-form-item label prop="area">
                                    <el-cascader
                                        clearable
                                        size="large"
                                        :options="options"
                                        v-model="selectedOptions"
                                    ></el-cascader>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">科目</div>
                            <el-select filterable clearable v-model="queryBox.subject">
                                <el-option
                                    v-for="item in subject_Options"
                                    :key="item.fId"
                                    :label="item.fSpecialtyName"
                                    :value="item.fId"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">资源查询</div>
                            <el-select filterable clearable v-model="queryBox.dataFromGroupKey">
                                <el-option
                                    v-for="item in resources_Options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="9">
                        <div class="depart-box">
                            <div class="slect-title">最新分配时间</div>
                            <el-date-picker
                                v-model="assignDate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('queryBox')"
                />
                <kt-button
                    :label="$t('action.search')"
                    type="primary"
                    perms="true"
                    :loading="btnLoading"
                    @click="search"
                />
            </div>
        </div>
        <!--表格内容栏-->
        <div class="dataList" v-loading="loadingData">
            <ul>
                <li>
                    <p>A类用户</p>
                    <p>{{this.pageResult.content.typeANum}}</p>
                </li>
                <li>
                    <p>B+类客户</p>
                    <p>{{this.pageResult.content.typeB1Num}}</p>
                </li>
                <li>
                    <p>B-类客户</p>
                    <p>{{this.pageResult.content.typeB2Num}}</p>
                </li>
                <li>
                    <p>C类客户</p>
                    <p>{{this.pageResult.content.typeCNum}}</p>
                </li>
                <li>
                    <p>D类客户</p>
                    <p>{{this.pageResult.content.typeDNum}}</p>
                </li>
                <li>
                    <p>其他</p>
                    <p>{{this.pageResult.content.typeOtherNum}}</p>
                </li>
            </ul>
            <div class="clear"></div>
        </div>

        <kt-button
            label="发送短信"
            style="margin-top:30px"
            v-if="smsDisplay"
            type="primary"
            perms="true"
            @click="smsSend"
        />
        <!-- 短信 -->
        <el-dialog title="短信发送" :visible.sync="dialogVisible" width="30%">
            <el-input
                type="textarea"
                v-if="smsLength<=40000"
                :rows="20"
                placeholder="请输入内容"
                v-model="textarea"
            ></el-input>
            <div class="sendFomCont">
                <span class="title">短信内容</span>
                <span class="font">
                    内容共计
                    <i class="red">{{Math.ceil(smsContentLength/2)}}</i>个字，预计使用短信
                    <i class="red">{{smsContentLengths==0?1:smsContentLengths}}</i>条。
                </span>
            </div>
            <el-input
                type="textarea"
                :rows="20"
                placeholder="请输入内容"
                v-model="smsContent"
                @input="smsContentChange"
            ></el-input>

            <div class="planSendTime">
                定时发送:
                <el-switch
                    :active-text="test1"
                    :inactive-text="test2"
                    class="demo"
                    inactive-color="#13ce66"
                    v-model="value2"
                    active-color="#ff4949"
                    @change="switchChange"
                    width="60"
                    :active-value="active"
                    :inactive-value="inactive"
                ></el-switch>
                <el-date-picker
                    width="200"
                    v-if="switchTime"
                    v-model="planSendTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
            </div>

            <kt-button
                label="发送"
                type="primary"
                :loading="sendLoading"
                perms="true"
                @click="smsSend2"
            />
        </el-dialog>
    </div>
</template>
<script>
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { baseUrl } from "@/utils/global";
import { regionDataPlus } from "element-china-area-data";
import axios from "axios";
import Cookies from "js-cookie";
export default {
    name: "AnswerFile",
    components: {
        CrmTable,
        KtButton
    },
    data() {
        return {
            size: "small",
            loading: false,
            btnLoading: false,
            smsDisplay: false,
            dialogVisible: false,
            sendLoading: false,
            columns: [
                { prop: "typeANum", label: "A类用户", minWidth: 100 },
                { prop: "typeB1Num", label: "B+类客户", minWidth: 220 },
                { prop: "typeB2Num", label: "B-类客户", minWidth: 120 },
                { prop: "typeCNum", label: "C类客户", minWidth: 120 },
                { prop: "typeDNum", label: "D类客户", minWidth: 120 },
                { prop: "typeOtherNum", label: "其他", minWidth: 120 }
            ],
            pageRequest: { pageNum: 1, pageSize: 10 },
            pageResult: {
                content: []
            },
            data: [
                {
                    id: "12556",
                    title: "问卷标题",
                    scope: "适用范围"
                }
            ],
            queryBox: {},
            //   地区
            options: regionDataPlus,
            selectedOptions: [],
            student_import_department: [],
            isopen: [
                {
                    value: "解锁",
                    label: "2"
                },
                {
                    value: "锁定",
                    label: "1"
                }
            ],
            loadingData: false,
            textarea: "",
            smsLength: 0,
            smsContent: "",
            smsContentLengths: 0,
            smsContentLength: 0,
            planSendTime: "",
            test1: "关闭",
            test2: "开启",
            active: "1",
            inactive: "2",
            value2: "1",
            switchTime: false,
            student_type_options: "",
            student_data_from_options: "",
            student_data_from_type_options: "",
            student_progress_options: "",
            userDerpatName: "",
            createDate: [],
            trackingDate: [],
            grade_cache_gradeOptions: "",
            studentEquipmentChange: "",
            assignDate: [],
            resources_Options: "",
            branchCenterName: "",
            student_TGsource_options: "",
            student_equipmentgrade_options: "",
            belongToNames: "",
            departmentInfoList: "",
            queryBox: {
                name: "",
                dataFrom: "",
                type: "",
                dataFromType: "",
                progress: "",
                code: "",
                phone: "",
                school: "",
                providerTeacher: "",
                providerAgent: "",
                createDate: "",
                moveDate: "",
                belongToPerson: "",
                importDepartment: "",
                belongTo: "",
                phone: "",
                grade: "",
                equipment: "",
                source: "",
                pageAddress: "",
                keyWords: "",
                dataFromGroupKey: "",
                isTmkContacted: "",
                departmentId: ""
            },
            branchCenterInfoList: "",
            subject_Options: ""
        };
    },
    methods: {
        // 搜索
        search() {
            //如果创建时间查询的时候选择了，给查询参数赋值
            if (this.createDate.length > 0) {
                this.queryBox.createDateStart = this.createDate[0];
                this.queryBox.createDateEnd = this.createDate[1];
            }
            //如果跟进时间查询的时候选择了，给查询参数赋值
            if (this.trackingDate.length > 0) {
                this.queryBox.trackingDateStart = this.trackingDate[0];
                this.queryBox.trackingDateEnd = this.trackingDate[1];
            }
            if (this.assignDate.length > 0) {
                this.queryBox.assignDateStart = this.assignDate[0];
                this.queryBox.assignDateEnd = this.assignDate[1];
            }
            if (this.selectedOptions.length > 0) {
                this.queryBox.province = this.selectedOptions[0];
                this.queryBox.city = this.selectedOptions[1];
                this.queryBox.area = this.selectedOptions[2];
            }

            var arr = Object.values(this.queryBox).filter(function(item) {
                if (item !== "") {
                    return true; //过滤掉为空的项
                }
            });

            if (arr.length === 0) {
                // 如果过滤后的arr长度为0，表示对象的键值对的值都为空！
                this.$message({
                    message: "请输入筛选项！",
                    type: "error"
                });
            } else {
                this.loadingData = true;
                this.loading = true;
                this.btnLoading = true;
                this.findPage(null);
            }
        },
        switchChange(type) {
            if (type == 2) {
                this.switchTime = true;
            } else {
                this.switchTime = false;
                this.planSendTime=''
            }
        },
        // 获取分页数据
        findPage: function(data) {
            if (this.loadingData) {
                this.loading = true;
                if (data !== null) {
                    this.loading = true;
                    this.btnLoading = true;
                    // this.pageRequest = data.pageRequest;
                }
                this.$api.student.queryForType(this.queryBox).then(res => {
                    if (res.result == 1) {
                        this.pageResult.content = res.data;
                        this.smsLength = res.data.phones.length;
                        this.textarea = res.data.phones.toString();
                        this.loading = false;
                        this.loadingData = false;
                        this.btnLoading = false;
                        this.smsDisplay = true;
                    }
                });
            }
        },

        reset(queryBox) {
            this.$refs.queryBox.resetFields();
            this.queryBox = {};
            this.value2 = "";
            this.smsDisplay = false;
            this.pageResult.content = [];

            this.createDate = [];
            this.queryBox.createDateStart = "";
            this.queryBox.createDateEnd = "";

            this.trackingDate = [];
            this.queryBox.trackingDateStart = "";
            this.queryBox.trackingDateEnd = "";

            this.assignDate = "";
            this.queryBox.assignDateStart = "";
            this.queryBox.assignDateEnd = "";

            this.selectedOptions = [];
            this.queryBox.province = "";
            this.queryBox.city = "";
            this.queryBox.area = "";
        },
        handleEdit(params) {
            this.$router.push({
                path: "/Answer/AnswerDetails",
                query: {
                    id: params.row.id
                }
            });
        },
        getDownList() {
            this.student_type_options = JSON.parse(
                localStorage.getItem("stdentTpye")
            );
            this.student_data_from_options = JSON.parse(
                localStorage.getItem("studentSource")
            );
            this.student_data_from_type_options = JSON.parse(
                localStorage.getItem("stdentDataFromType")
            );
            this.subject_Options = JSON.parse(
                localStorage.getItem("studentSubject")
            );
            this.student_progress_options2 = JSON.parse(
                localStorage.getItem("studenProgress2")
            );
            this.student_progress_options = JSON.parse(
                localStorage.getItem("studenProgress")
            );
            this.oemType = JSON.parse(localStorage.getItem("oemType"));
            this.$api.user
                .optionsList({ codeType: "student_import_department" })
                .then(res => {
                    this.student_import_department = res.keyValueList;
                });
        },
        handleClearable(value) {
            if (this.userName == "") {
                this.queryBox.belongTo = "";
            }
            if (this.userDerpatName == "") {
                this.queryBox.departmentId = "";
            }
            if (this.branchCenterName == "") {
                this.queryBox.providerAgent = "";
            }
        },
        // 发送短信
        smsSend() {
            this.dialogVisible = true;
        },
        smsSend2() {
            this.sendLoading = true;
            this.$api.student
                .sendMsg({
                    sendMsgType: 1,
                    userId: Cookies.get("userId"),
                    phones: this.textarea,
                    sendSwitch: 1, //发送开关，不传值就是不发送，随便传个不为0的值就是发送
                    sendContent: this.smsContent,
                    planSendTime: this.planSendTime
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        this.$message({ message: res.msg, type: "success" });
                        this.dialogVisible = false;
                    }
                    this.sendLoading = false;
                });
        },
        // 资源查询
        studentDataFromGroup() {
            this.$api.dropdown.studentDataFromGroup().then(res => {
                if (res.result == 1) {
                    this.resources_Options = res.keyValueList;
                }
            });
            this.student_equipmentgrade_options = JSON.parse(
                localStorage.getItem("studentEquipment")
            );
            this.student_TGsource_options = JSON.parse(
                localStorage.getItem("studentTGsource")
            );
            this.grade_cache_gradeOptions = JSON.parse(
                localStorage.getItem("gradeCache")
            );
            this.$api.dropdown.users({ userType: 3, deptType: 1 }).then(res => {
                this.belongToNames = res.userInfoList;
            });
            this.$api.student
                .queryDepartmentListForCustomerManager({ deptType: 1 })
                .then(res => {
                    this.departmentInfoList = res.departmentInfoList;
                });
            this.$api.dropdown.branchcenter().then(res => {
                this.branchCenterInfoList = res.branchCenterInfoList;
            });
        },
        smsContentChange(val) {
            this.smsContentLength = this.strlen(val);
            this.smsContentLengths = Math.ceil(this.strlen(val) / 70);
        },
        // 判断字符长度
        strlen(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                //单字节加1
                if (
                    (c >= 0x0001 && c <= 0x007e) ||
                    (0xff60 <= c && c <= 0xff9f)
                ) {
                    len++;
                } else {
                    len += 2;
                }
            }
            return len;
        }
    },
    mounted() {
        this.getDownList();
        this.studentDataFromGroup();
    }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss" scoped>
.dataList {
    overflow: hidden;
    height: 120px;
    width: 98%;
    margin: 0 auto;
    ul {
        li {
            list-style: none;
            float: left;
            width: 16%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            p {
                margin: 0;
                border: 1px solid #000;
            }
            p:first-child {
                background: #cccccc;
                border-bottom: none;
            }
        }
    }
}
.sendFomCont {
    height: 30px;
    line-height: 30px;
    margin: 20px 0;
    span {
        display: inline-block;
    }
    span.title {
        font-weight: bold;
        float: left;
        font-size: 20px;
    }
    span.font {
        float: right;
    }
    .red {
        color: red;
        font-style: normal;
    }
}
.planSendTime {
    height: 45px;
    line-height: 45px;
    text-align: left;
    padding: 20px 0;
}
.clear {
    clear: both;
    overflow: hidden;
    display: block;
    height: 0px;
    _height: 1px;
}
</style>
<style scoped>
.demo /deep/ .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
.demo /deep/ .el-switch__label--left {
    z-index: 9;
    left: 20px;
}
.demo /deep/ .el-switch__label--right {
    z-index: 9;
    left: -5px;
}
.demo /deep/ .el-switch__label.is-active {
    display: block;
}
/* .demo /deep/  .el-switch__core{
  width: 58px!important;
} */
</style>